<!DOCTYPE html>
<html>

<head>
    <link type="text/css" rel="stylesheet" href="css/custom.css" />
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="referrer" content="no-referrer" />
    <meta charset="UTF-8" />    
    <title>pybiliroku</title>
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" href="/favicon.png"/>
</head>

<body>
    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/materialize.min.js"></script>
    <script type="text/javascript" src="js/main.js" defer></script>

    <nav class="light-blue lighten-1">
        <div class="container nav-wrapper">
            <ul class="left">
                <li>
                    <a href='#'>
                        <i class='material-icons'>phonelink_setup</i>
                    </a>
                </li>
            </ul>
            <ul class="center">pybiliroku</h1>
            <ul class="right">
                <li>
                    <a href='#settings_modal' class="modal-trigger" onclick="load_config()">
                        <i class='material-icons'>settings</i>
                    </a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="container">
        <h1 class="header"> </h1>
        <div class="row">
            <div class="room-id-input col offset-s1">
                <input placeholder="Room ID" pattern="[0-9]*" type="number" min="0" class="validate" id="room_id">
                <i class="material-icons" id="open_room">add</i>
            </div>
            <p class="disk col offset-s1">Loading Disk Usage</p>
        </div>
        <ul id="tasks" class="collapsible popout">
        </ul>
    </div>

    <!-- Modal Structure -->
    <div id="open_room_modal" class="modal">
        <div class="modal-content">
            <h4 id="open_room_confirm_title">Confirmation</h4>
            <p id="open_room_confirm_content">Start recording "room"?</p>
        </div>
        <div id="open_room_modal_buttons" class="modal-footer">
            <a href='#!' class='modal-action modal-close waves-effect waves-green btn-flat'>Yes</a>
            <a href='#!' class='modal-action modal-close waves-effect waves-green btn-flat'>No</a>
            <a href='#!' class='modal-action modal-close waves-effect waves-green btn-flat'>Okay</a>
        </div>
    </div>

    <div id="settings_modal" class="modal">
        <div class="modal-content">
            <h4>Settings</h4>
            <div class="input-field col s11">
                <input id="savepath" type="text" class="validate" placeholder="Empty">
                <label for="savepath">Savepath: </label>
            </div>
            <div class="input-field col s11">
                <input id="open_on_init" type="text" class="validate" placeholder="Empty">
                <label for="open_on_init">Automatically starts recording on startup: </label>
            </div>
        </div>
        <div id="open_room_modal_buttons" class="modal-footer">
            <a href='#!' class='modal-action modal-close waves-effect waves-green btn-flat' onclick="save_config()">Save</a>
            <a href='#!' class='modal-action modal-close waves-effect waves-green btn-flat'>Exit</a>
        </div>
    </div>
</html>
